<template>
  <div class="app-container">
    <el-card shadow="never">
      <div class="flex-x-between mb-10px">
        <div>
          <el-button type="success" icon="RefreshRight" @click="handleRefreshRight">刷新</el-button>
        </div>
      </div>
      <el-table ref="dataTableRef" v-loading="loading" :data="pageData" highlight-current-row>
        <el-table-column label="名称" prop="title" align="center"></el-table-column>
        <el-table-column label="操作人" prop="create_admin_name" width="100" align="center" />
        <el-table-column label="创建时间" align="center" prop="created_at" width="180">
          <template #default="scope">
            {{ formatTimestamp(scope.row.created_at * 1000) }}
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="300">
          <template #default="scope">
            <el-button type="primary" icon="Bottom" link size="small" @click="handleDownload(scope.row)">
              下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page" v-model:limit="queryParams.ps"
        @pagination="handleQuery()" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ExporList",
  inheritAttrs: false,
});

import adGroupAPI, { adGroupPageQuery, PageVO } from "@/api/system/adGroup";
import { formatTimestamp } from '@/utils/index';
const pageData = ref<PageVO[]>([]);
const total = ref(0);

// 选中的用户ID
const loading = ref(false);

const handleRefreshRight = () => {
  queryParams.page = 1;

  handleQuery();
}

const queryParams = reactive<adGroupPageQuery>({
  page: 1,
  ps: 10,
});

const handleDownload = (row: any) => {
  const link = document.createElement('a')
  link.href = row.download_url;
  link.click()
}

/** 查询通知公告 */
function handleQuery() {
  loading.value = true;
  adGroupAPI.exportList(queryParams)
    .then((data) => {
      pageData.value = data.data;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

onMounted(() => {
  handleQuery();
});
</script>
